<!DOCTYPE html>
<html lang="en">

<head>
    <!--
        ===
        This comment should NOT be removed.

        Charisma v2.0.0

        Copyright 2012-2014 Muhammad Usman
        Licensed under the Apache License v2.0
        http://www.apache.org/licenses/LICENSE-2.0

        http://usman.it
        http://twitter.com/halalit_usman
        ===
    -->
    <meta charset="utf-8">
    <title>Admin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
    <meta name="author" content="Muhammad Usman">

    <!-- The styles -->
    <link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">

    <link href="css/charisma-app.css" rel="stylesheet">
    <link href='bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet'>
    <link href='bower_components/fullcalendar/dist/fullcalendar.print.css' rel='stylesheet' media='print'>
    <link href='bower_components/chosen/chosen.min.css' rel='stylesheet'>
    <link href='bower_components/colorbox/example3/colorbox.css' rel='stylesheet'>
    <link href='bower_components/responsive-tables/responsive-tables.css' rel='stylesheet'>
    <link href='bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css' rel='stylesheet'>
    <link href='css/jquery.noty.css' rel='stylesheet'>
    <link href='css/noty_theme_default.css' rel='stylesheet'>
    <link href='css/elfinder.min.css' rel='stylesheet'>
    <link href='css/elfinder.theme.css' rel='stylesheet'>
    <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
    <link href='css/uploadify.css' rel='stylesheet'>
    <link href='css/animate.min.css' rel='stylesheet'>

    <!-- jQuery -->
    <script src="bower_components/jquery/jquery.min.js"></script>

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- The fav icon -->
    <link rel="shortcut icon" href="img/favicon.ico">
	<script type="text/javascript">
		function turnPage(pageNo) {
			if(pageNo<1||pageNo>${pageCnt})return false;
			$("#pageNo").val(pageNo);
			$("#searchText").val($("#search-input").val());
			$("#manage-form").submit();
		}
		function editKey(keyId) {
			$("#edit-keyId").val(keyId);
			$("#edit-form").submit();
		}
		function deleteKey(keyId) {
			if(confirm("This can't be undo. Confirm to delete?")==false)return false;
			$("#delete-keyId").val(keyId);
			$("#delete-form").submit();
		}
	</script>
</head>

<body>
    <!-- topbar starts -->
    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-inner">
            <button type="button" class="navbar-toggle pull-left animated flip">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="addNewKey.html"> <img alt="Charisma Logo" src="img/logo20.png" class="hidden-xs" />
                <span>Admin</span>
            </a>

            <!-- user dropdown starts -->
            <div class="btn-group pull-right">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-user"></i><span class="hidden-sm hidden-xs"> admin</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="logout.html">Logout</a>
                    </li>
                </ul>
            </div>
            <!-- user dropdown ends -->

            <!-- theme selector starts -->
            <div class="btn-group pull-right theme-container animated tada">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-tint"></i><span class="hidden-sm hidden-xs"> Change Theme / Skin</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" id="themes">
                    <li><a data-value="classic" href="#"><i class="whitespace"></i> Classic</a>
                    </li>
                    <li><a data-value="cerulean" href="#"><i class="whitespace"></i> Cerulean</a>
                    </li>
                    <li><a data-value="cyborg" href="#"><i class="whitespace"></i> Cyborg</a>
                    </li>
                    <li><a data-value="simplex" href="#"><i class="whitespace"></i> Simplex</a>
                    </li>
                    <li><a data-value="darkly" href="#"><i class="whitespace"></i> Darkly</a>
                    </li>
                    <li><a data-value="lumen" href="#"><i class="whitespace"></i> Lumen</a>
                    </li>
                    <li><a data-value="slate" href="#"><i class="whitespace"></i> Slate</a>
                    </li>
                    <li><a data-value="spacelab" href="#"><i class="whitespace"></i> Spacelab</a>
                    </li>
                    <li><a data-value="united" href="#"><i class="whitespace"></i> United</a>
                    </li>
                </ul>
            </div>
            <!-- theme selector ends -->


        </div>
    </div>
    <!-- topbar ends -->
    <div class="ch-container">
        <div class="row">

            <!-- left menu starts -->
            <div class="col-sm-2 col-lg-2">
                <div class="sidebar-nav">
                    <div class="nav-canvas">
                        <div class="nav-sm nav nav-stacked">

                        </div>
                        <ul class="nav nav-pills nav-stacked main-menu">
                            <li class="nav-header">Main</li>


                            <li><a class="ajax-link " href="addNewCloth.html"><i
                                    class="glyphicon glyphicon-edit"></i><span> upload clothes</span></a>
                            </li>



                            <li><a class="ajax-link" href="manage.html"><i
                                    class="glyphicon glyphicon-align-justify"></i><span> clothes manage </span></a>
                            </li>

							<li class="active"><a class="ajax-link" href="keymanage.html"><i
                                    class="glyphicon glyphicon-align-justify"></i><span> key manage </span></a>
                            </li>

							<li><a class="ajax-link" href="addKey.html"><i
                                    class="glyphicon glyphicon-align-justify"></i><span> add key </span></a>

                        </ul>

                    </div>
                </div>
            </div>
            <!--/span-->
            <!-- left menu ends -->

            <noscript>
                <div class="alert alert-block col-md-12">
                    <h4 class="alert-heading">Warning!</h4>

                    <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
                </div>
            </noscript>

            <div id="content" class="col-lg-10 col-sm-10">
                <!-- content starts -->


                <div>
                    <ul class="breadcrumb">
                        <li>
                            <a href="#">index</a>
                        </li>
                        <li>
                            <a href="#">key manage</a>
                        </li>
                    </ul>
                </div>

                <div class="row">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-user"></i> keys </h2>

                                <div class="box-icon">

                                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                    class="glyphicon glyphicon-chevron-up"></i></a>

                                </div>
                            </div>
                            <div class="box-content">
                            	<div class="form-inline">
                                     <input required type="text" name="search-input" value="${searchText?if_exists}" class="form-control normal-input" id="search-input" placeholder="search">
                               		 <button class="btn btn-primary" onclick="turnPage(1);">Search</button>
                            	</div>
                                <table class="table table-striped table-bordered table-hover table-condensed">
                                    <thead>
                                        <tr>
                                            <th>client info</th>
                                            <th>generate time</th>
                                            <th>licence key</th>
                                            <th>pc info</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
										<#list page.list as key>
											<tr>
												<td class="center">${key.clientInfo?if_exists}</td>
												<td class="center">${key.generateTime?if_exists}</td>
												<td class="center">${key.licence?if_exists}</td>
												<td class="center">${key.pcInfo?if_exists}</td>
												<td class="center">
	                                                <a class="btn btn-success" onclick="editKey(${key.id});">
	                                                    <i class="glyphicon glyphicon-zoom-in icon-white"></i> View
	                                                </a>
	                                                <a class="btn btn-danger" onclick="deleteKey(${key.id});">
	                                                    <i class="glyphicon glyphicon-trash icon-white"></i> Delete
	                                                </a>
	                                            </td>
											</tr>
										</#list>


                                    </tbody>
                                </table>
                                <nav>
								  <ul class="pagination">
								    <li <#if pageNo=1>class="disabled"</#if>><a href="javascript:void(0);" onclick="turnPage(${pageNo- 1});" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
								    <#list pageStart..pageEnd as p>
								    	<li <#if p=pageNo>class="active"</#if> ><a href="javascript:void(0);" onclick="turnPage(${p});">${p}<span class="sr-only">(current)</span></a></li>
								    </#list>
								    <li <#if pageNo=pageCnt>class="disabled"</#if>><a href="javascript:void(0);" onclick="turnPage(${pageNo + 1});" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
								  </ul>
								</nav>
                                <form action="editKey.html" id="edit-form" method="post">
                                	<input name="keyId" id="edit-keyId" type=hidden>
                                </form>
                                <form action="deleteKey.html" id="delete-form" method="post">
                                	<input name="keyId" id="delete-keyId" type=hidden>
                                </form>
                                <form action="keymanage.html" id="manage-form" method="post">
                                	<input name="pageNo" id="pageNo" type="hidden">
                                	<input name="pageSize" id="pageSize" type=hidden>
                                	<input name="searchText" id="searchText" type="hidden">
                                </form>
                            </div>
                        </div>
                    </div>
                    <!--/span-->

                </div>
                <!--/row-->


                <!-- content ends -->
            </div>
            <!--/#content.col-md-0-->
        </div>
        <!--/fluid-row-->



        <hr>



        <footer class="row">

        </footer>

    </div>
    <!--/.fluid-container-->

    <!-- external javascript -->

    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- library for cookie management -->
    <script src="js/jquery.cookie.js"></script>
    <!-- calender plugin -->
    <script src='bower_components/moment/min/moment.min.js'></script>
    <script src='bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
    <!-- data table plugin -->
    <script src='js/jquery.dataTables.min.js'></script>

    <!-- select or dropdown enhancer -->
    <script src="bower_components/chosen/chosen.jquery.min.js"></script>
    <!-- plugin for gallery image view -->
    <script src="bower_components/colorbox/jquery.colorbox-min.js"></script>
    <!-- notification plugin -->
    <script src="js/jquery.noty.js"></script>
    <!-- library for making tables responsive -->
    <script src="bower_components/responsive-tables/responsive-tables.js"></script>
    <!-- tour plugin -->
    <script src="bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
    <!-- star rating plugin -->
    <script src="js/jquery.raty.min.js"></script>
    <!-- for iOS style toggle switch -->
    <script src="js/jquery.iphone.toggle.js"></script>
    <!-- autogrowing textarea plugin -->
    <script src="js/jquery.autogrow-textarea.js"></script>
    <!-- multiple file upload plugin -->
    <script src="js/jquery.uploadify-3.1.min.js"></script>
    <!-- history.js for cross-browser state change on ajax -->
    <script src="js/jquery.history.js"></script>
    <!-- application script for Charisma demo -->
    <script src="js/charisma.js"></script>


</body>

</html>
